/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Custom CSS styling of MD cards, displayed after wizard setup is complete and each card contains a visualization.
 */

/* Core styling of column. 'Column' class must not be namespaced as it is used in page-vizualization functionality, as
   well as the add column hover functionality. */
:global(.Column) {
	border-radius: 6px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: default;
	overflow: visible;
	margin-left: 0;
	margin-right: 0;
	transition: margin 200ms 150ms ease-in-out; /* Match transition of opacity of ColumnAdd, this is for animating the add column hover functionality. */
	user-select: none;
}

:global(.Column:hover .resize-enable .react-resizable-handle) {
	opacity: 1;
}

/* Disable column interaction */
.disableInteraction {
	pointer-events: none;
}

/* Container around column label (A, B, C etc) and controls */
.headerContainer {
	padding: 16px;
}

/* Zoom control */
.zoomControl {
	align-items: center;
	bottom: 0;
	display: flex;
	cursor: pointer;
	font-size: 10px; /* Close icon inherits font size. */
	line-height: 10px;
	position: absolute;
	text-transform: uppercase;
	width: calc(100% - 32px); /* The position absolute of the zoom control requires width specification for content to ellipsis when required. */
}

/* Zoom card header container */
/* Zoom card title container */
.zoomCard .headerContainer,
.zoomCard .titleContainer {
	padding: 8px 0;
	margin-bottom: 1px; /* Compensates for lack of divider between containers. */
}

/* Zoom card header container */
.zoomCard .headerContainer {
	height: 72px;
}
